<template>
  <div class="container">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane label="事项类型" name="first">
          <EventTypeList v-if="isShowFirst"></EventTypeList>
        </el-tab-pane>
        <el-tab-pane label="巡查事项" name="second">
          <InspectionItemsList v-if="isShowSecond"></InspectionItemsList>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div class="tabs">
            <ul @click="handleClick" class="clearFloat">
                <li
                    v-for="(item, index) in listType"
                    :key="index"
                    :currentIndex="index"
                    :class="isIndex === index ? 'activeLi' : ''"
                    style="cursor: pointer"
                >
                    {{ item }}
                </li>
            </ul>
        </div>
        <div class="mainCon">
            <EventTypeList v-if="isIndex === 0"></EventTypeList>
            <InspectionItemsList v-if="isIndex === 1"></InspectionItemsList>
        </div> -->
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import EventTypeList from './EventTypeList'
import InspectionItemsList from './InspectionItemsList'
export default {
  name: 'scoreList',
  components: {
    topTitle,
    EventTypeList,
    InspectionItemsList,
  },
  data() {
    return {
      titleText: '巡查配置',
      titleExplain: '',
      listType: ['事项类型', '巡查事项'],
      isIndex: 0,
      activeName: 'first',
      isShowFirst: true,
      isShowSecond: false,
    }
  },
  methods: {
    // handleClick(e) {
    //     if (e.target.nodeName === "LI") {
    //         this.isIndex = e.target.getAttribute("currentIndex") * 1;
    //     } else {
    //         return;
    //     }
    // },
    //tabs栏切换
    handleClick(tab, event) {
      if (tab.label == '事项类型') {
        this.isShowFirst = true
        // this.isShowSecond = false;
        this.domain = 'FJ'
        //  this.$router.push({
        //     query: {
        //         domain: this.domain
        //     },
        // });
      } else if (tab.label == '巡查事项') {
        this.isShowSecond = true
        // this.isShowFirst = false;
        this.domain = 'JZ'
        // this.$router.push({
        //     query: {
        //         domain: this.domain
        //     },
        // });
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .topCon {
    margin-bottom: 0;
  }
  .mainCon {
    // top: 239px;
    // padding: 24px;
    padding-top: 0;
  }
  .ESmainCon {
    // top: 209px;
  }
  .tabs {
    height: 43px;
    line-height: 43px;
    text-align: center;
    background: #e4ebf1;
    padding-left: 12px;
    .clearFloat:after {
      content: '';
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
    li {
      float: left;
      padding-left: 16px;
      padding-right: 16px;
      border-radius: 4px 4px 0 0;
      margin-right: 5px;
      font-family: 'SourceHanSansCN-Normal';
      font-size: 14px;
      color: #333333;
      background: #d5e0e9;
    }
    .activeLi {
      background: #ffffff;
      font-family: 'SourceHanSansCN-Medium';
    }
  }
  /deep/.el-tabs__content {
    padding-top: 24px;
  }
}
</style>
